import { defineComponent, onUnmounted, reactive, toRefs } from 'vue'
import Draw from './draw'

const uniqueNames = (arr)=> {
  const names = new Set();
  arr.forEach(obj => {
    names.add(obj.name);
  });
  return Array.from(names);
};

export default defineComponent({
  components: {
    Draw,
  },
  props: {
    seriesData: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    let intervalInstance = null
    const cdata = reactive({
      //xData: ['坑槽', '横向裂缝', '纵向裂缝', '抛撒物', '麻面', '路面不平'],
      xData: uniqueNames(props.seriesData),
      seriesData: props.seriesData,
    })

    // console.log('props.cdata', JSON.stringify(cdata))
    intervalInstance = setInterval(() => {
      const data = cdata.seriesData
      cdata.seriesData = data.map((e:any) => {
        return { value: e.value + 10, name: e.name }
      })
    }, 1000)

    onUnmounted(() => {
      clearInterval(intervalInstance)
    })

    return () => {
      return (
        <div>
          <Draw cdata={cdata} />
        </div>
      )
    }
  },
})

// import { defineComponent, onUnmounted, reactive } from 'vue'
// import Draw from './draw'

// export default defineComponent({
//   components: {
//     Draw,
//   },
//   setup() {
//     let intervalInstance = null
//     const cdata = reactive({
//       xData: ['坑槽', '横向裂缝', '纵向裂缝', '抛撒物', '麻面', '路面不平'],
//       seriesData: [
//         { value: 10, name: '坑槽' },
//         { value: 5, name: '横向裂缝' },
//         { value: 15, name: '纵向裂缝' },
//         { value: 25, name: '抛撒物' },
//         { value: 20, name: '麻面' },
//         { value: 35, name: '路面不平' },
//       ],
//     })
//     intervalInstance = setInterval(() => {
//       const data = cdata.seriesData
//       cdata.seriesData = data.map((e) => {
//         return { value: e.value + 10, name: e.name }
//       })
//     }, 1000)

//     onUnmounted(() => {
//       clearInterval(intervalInstance)
//     })
//     return () => {
//       return (
//         <div>
//           <Draw cdata={cdata} />
//         </div>
//       )
//     }
//   },
// })
